<template>
  <div>
    <section>
      <div class="container">
        <div style="margin-bottom: 20px">
          <img
            class="d-block w-100"
            :src="require('@/assets/img/other/hiring_1280.jpg')"
          />
        </div>

        <div class="row">
          <template v-for="(item, index) in SetupData" :key="index">
            <div class="col-md-3">
              <div class="icon-box icon-box-green">
                <div class="icon">
                  <i :class="item.iconStyle"></i>
                </div>
                <div class="description">
                  <span>{{ item.title }}</span>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </section>

    <section
      class="resume"
      data-aos="fade-up"
      data-aos-easing="ease-in-out"
      data-aos-duration="500"
    >
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <div class="entry">
              <a-list
                item-layout="vertical"
                size="large"
                :data-source="resultData.rows"
              >
                <template #renderItem="{ item }">
                  <a-list-item key="item.title">
                    <template #extra> </template>
                    <a-list-item-meta>
                      <template #title>
                        <a style="font-size: 1.5rem; font-weight: bold">{{
                          item.contentTitle
                        }}</a>
                      </template>
                      <template #description>
                        <span>{{ item.contentDescription }}</span>
                      </template>
                    </a-list-item-meta>
                    <div v-html="item.contentDetails"></div>
                  </a-list-item>
                </template>
                <template #footer>
                  <a-pagination
                    @change="onPageChange"
                    :current="params.pageNo"
                    :pageSize="params.pageSize"
                    :total="resultData.total"
                  />
                </template>
              </a-list>
            </div>
          </div>

          <!-- End sidebar -->
          <div class="col-md-4">
            <div class="sidebar">
              <h3 class="sidebar-title">Search</h3>
              <div class="sidebar-item">
                <!-- <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="" v-model:value="params.contentTitle" />
                  <button class="btn btn-primary" type="button" id="button-addon2" @click="onSearchResume">
                    <i class="bi bi-search"></i>
                  </button>
                </div> -->
                <a-input-search
                  v-model:value="params.contentTitle"
                  placeholder="input search text"
                  enter-button="搜索"
                  size="middle"
                  @search="onSearchResume"
                />
              </div>
              <!-- End sidebar search formn-->

              <!-- End sidebar tags-->
            </div>
            <!-- End sidebar -->
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { getArticleList, imgUrl } from "@/api/index.js";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";

const SetupData = [
  {
    iconStyle: "bi bi-body-text",
    title: "完善的员工培训体系",
  },
  {
    iconStyle: "bi bi-clipboard",
    title: "完美的员工职业规划",
  },
  {
    iconStyle: "bi bi-currency-yen",
    title: "每季度员工加薪机会",
  },
  {
    iconStyle: "bi bi-easel2",
    title: "专业的导师指导机会",
  },
];

export default {
  name: "",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      SetupData,
      params: {
        contentTitle: "",
        categoryId: "1503577032250941442",
        contentDisplay: "0",
        pageNo: 1,
        pageSize: 5,
      },
      resultData: {
        total: 0,
        rows: [],
      },
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      methods.initData();
    });
    //自定义方法
    const methods = {
      initData: () => {
        methods.getList();
      },
      getList() {
        getArticleList(data.params).then((res) => {
          data.resultData = res.data;
        });
      },
      onSearchResume() {
        data.params.pageNo = 1;
        methods.getList();
      },
      onPageChange(page) {
        data.params.pageNo = page;
        methods.getList();
      },
    };

    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
.icon-box-green .icon {
  background: #eafde7;
}
.icon-box-green .icon i {
  color: #41cf2e;
  font-size: 2em;
}

.icon-box {
  padding: 30px;
  position: relative;
  overflow: hidden;
  margin: 0 0 40px 0;
  background: #fff;
  box-shadow: 0 5px 26px 0 rgba(68, 88, 144, 0.14);
  transition: all 0.3s ease-in-out;
  text-align: center;
  border: 1px solid #fff;

  .icon {
    margin: 0 auto 20px auto;
    padding-top: 17px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    width: 72px;
    height: 72px;
  }

  .title {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 18px;
  }

  .description {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 0;
  }
}

//简历
.resume {
  padding: 20px 0 20px 0;

  .entry {
    padding: 30px;
    margin-bottom: 60px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .sidebar {
    padding: 30px;
    margin: 0 0 60px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
  .sidebar .sidebar-title {
    font-size: 20px;
    font-weight: 700;
    padding: 0 0 0 0;
    margin: 0 0 15px 0;
    color: #1e4356;
    position: relative;
  }

  .sidebar .sidebar-item {
    margin-bottom: 30px;
  }
}
</style>
